<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="goodList.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            background: #eeeeee;
        }

        #index_list {
            width: 100vw;

        }

        #list_item {
            width: 18vw;
            height: 35vh;
            text-align: center;
            float: left;
            margin: 10px 1vw;
            background-color: white;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
        }

        #list_item img {
            margin: 15px 0;
            width: 150px;
            /* height: 100px; */
        }
        #list_item img:hover {
            transform: scale(1.2,1.2);
        }
        li {
            list-style: none;
        }

        .item_font {
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
        }
        .item_tit{
            font-size: 1.7vw;
            overflow: hidden;
            white-space: nowrap;
        }

        table {
            width: 90vw;
           margin: 0 auto;
        }
        #data_index{
            text-align: center;
            background-color: white;

        }
        #data_img{
            width: 10vw;
        }
   
    </style>
</head>

<body>
    <div id="app">
        <ul id="index_list">
            <li v-for="item_list in goodList">

                <div id="list_item">
                    <h3 class="item_tit">{{item_list.title}}</h3>
                    <img  :src="item_list.img_list_url" alt="" srcset="">
                    <h3 class="item_font">{{item_list.type_two}} ￥{{item_list.price}}</h3>
                    <button @click="add(item_list)">添加购物车</button>
                </div>


            </li>
        </ul>

        <table border="1">
            <tr>
                <th>名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>数量</th>
                <th>合计</th>

            </tr>
            <tr id="data_index" v-for="(index_list,index) in list">
                <td>{{index_list.title}}</td>
                <td><img id="data_img" :src="index_list.img_list_url" alt=""></td>
                <td>￥{{index_list.price}}</td>
                <td>
                    <button @click="increase(index)">+</button>
                    {{index_list.Num}}
                
                    <button @click="reduce(index)">-</button>
                </td>
                <td id="border_r"   :value="index_list.title"> {{index_list.parmas}}</td>

            </tr>
        </table>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 内容过多去掉一部分
            goodList: goodList.slice(0, 10),
            list: [],
        },

        methods: {
            increase:function(index){
               this.list[index].Num++;
               this.list[index].parmas=this.list[index].Num*this.list[index].price;
            },
            reduce:function(index){
               this.list[index].Num--;
               this.list[index].parmas=this.list[index].Num*this.list[index].price;
               if(this.list[index].Num<1){
                this.list[index].Num=1;
                this.list[index].parmas=this.list[index].price;
                var choose = confirm('不想要我了吗，亲');
                if(choose){
                   this.list.splice(index,1);
                }
               }
            },
            add:function (item_list) {
                //验证添加商品
                // console.log("111");
                
                var flag = true;
                for (var i = 0; i < this.list.length; i++) {
                    // console.log("222");
                    
                    if (item_list.title == this.list[i].title) {
                        // console.log('添加过了');
                        this.list[i].Num++;
                        this.list[i].parmas=this.list[i].Num*item_list.price;
                        flag = false;
                    }
                
                }
                if (flag) {
                        this.list.push({
                            title: item_list.title,
                            img_list_url: item_list.img_list_url,
                           
                            price: item_list.price,
                            Num: 1,
                            parmas:item_list.price,
                        })

                    }
            }
        },
    })
</script>

</html>